<template>
  <div class="container">
    <el-card style="position: relative">
      <RouterHeader :title="'导入记录'"></RouterHeader>
      <div class="content">
        <el-form
          ref="ruleFormRef"
          :model="form"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          :size="formSize"
          status-icon
        >
          <el-form-item label="会议发起人" prop="createdByName">
            <el-input
              class="input-item"
              v-model="form.createdByName"
              placeholder="请输入"
              :disabled="route.query.name === '3' || route.query.name === '1'"
            ></el-input>
          </el-form-item>
          <el-form-item label="会议时间" prop="meetingTime">
            <el-date-picker
              v-model="form.meetingTime"
              type="datetime"
              placeholder="选择时间"
              style="width: 100%"
              format="YYYY-MM-DD HH:mm:ss"
              value-format="YYYY-MM-DD HH:mm:ss"
              :disabled="route.query.name === '3' || route.query.name === '1'"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="会议名称" prop="meetingName">
            <el-input
              class="input-item"
              v-model="form.meetingName"
              placeholder="请输入"
              :disabled="route.query.name === '3' || route.query.name === '1'"
            ></el-input>
          </el-form-item>
          <el-form-item label="会议前文件">
            <fileupload
              :modelValue="form.fileListOne"
              @update:modelValue="handleModelValueUpdate"
              :flag="route.query.name === '3' || route.query.name === '1'"
            ></fileupload>
          </el-form-item>
          <el-col :span="24">
            <el-form-item label="会议纪要" prop="meetingPointFile">
              <fileupload
                :modelValue="meetingPointFile"
                @update:modelValue="meetModel"
              ></fileupload>
            </el-form-item>
          </el-col>

          <el-form-item label="参会人员选择">
            <approver
              :typeId="3"
              :approverList="form.meetingJionUser"
              @handleChooseapprover="handleChooseapprover"
              :mark="false"
              :flag="true"
              readonly
            ></approver>
          </el-form-item>
          <el-form-item label="记录人员">
            <!-- {{form.meetingCopyUser}} -->
            <approver
              ref="approverRef"
              :approverList="form.meetingCopyUser"
              :typeId="3"
              @handleChooseapprover="handleChooseapproverCc"
              :mark="false"
            />
          </el-form-item>

          <!-- <el-form-item label="会议导入文件" prop="fileList">
            <fileupload
              :modelValue="fileList"
              @update:modelValue="handlelValue"
            ></fileupload>
          </el-form-item> -->
        </el-form>
      </div>
      <div
        style="position: absolute; bottom: 20px; right: 20px"
        v-if="route.query.name !== '3'"
      >
        <el-button @click="resetForm()"> 取消 </el-button>
        <el-button type="primary" @click="submitForm()"> 提交 </el-button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { mettingDetail } from "@/api/messageNotifications/notificationsList";
import RouterHeader from "@/components/RouterHeader";
import fileupload from "@/components/FileUpload";
import approver from "@/components/ApproveMeet/approver.vue";
import { onMounted, ref } from "vue";
import { importHstriy } from "@/api/meeting/index";
import { useRoute, useRouter } from "vue-router";
import { affixEmits, ElMessage } from "element-plus";
import useUserStore from "@/store/modules/user";
const route = useRoute();
const router = useRouter();
const approverRef = ref();
const userStore = useUserStore();

const form = reactive({
  //meetingPointFile: [], //
  createdByName: "", //会议发起人
  meetingTime: "", // 会议时间
  meetingName: "", // 会议名称
  meetingCopyUser: [],
  meetingJionUser: [],
});

let meetingPointFile = ref([]);
const meetModel = (val, result, operationType) => {
  let a = [];
  if (operationType === "success") {
    if (result) {
      a.push(result);
      meetingPointFile.value = a;
    }
  } else if (operationType === "delete") {
    a.splice(result, 1);
    meetingPointFile.value = a;
  }
};
// const fileList=ref([])
// 会议导入文件
// const handlelValue = (val, result, operationType) => {
//   let a=[]
//   if (operationType === "success") {
//     if (result) {
//       a.push(result)
//       fileList.value=a;
//     }
//   } else if (operationType === "delete") {
//     a.splice(result, 1);
//     fileList.value=a;
//   }
// };

const rules = {
  meetingTime: [{ required: true, message: "请选择会议时间", trigger: "blur" }],
  meetingName: [{ required: true, message: "请输入会议名称", trigger: "blur" }],
};
const disabled = ref(true);

// 2.控制表单项是否只读
const isDisabled = () => {
  if (
    route.query.name === "3" ||
    route.query.name === "6" ||
    route.query.name === "5"
  ) {
    return (disabled.value = true);
  } else {
    return (disabled.value = false);
  }
};

// 2.控制表单项是否只读
// 获取会议详情
const getMeetingDetail = async () => {
  const id = route.query.id;
  const res = await mettingDetail(id);
  if (res.code === 200 && typeof (res.data === "object")) {
    for (const key in res.data) {
      form[key] = res.data[key];

      meetingPointFile.value = res.data.meetingPointFile;
      form.meetingJionUser = res.data.meetingJionUser;
      form.meetingCopyUser = res.data.meetingCopyUser;
    }
  }
};

// 取消
const resetForm = () => {
  router.go(-1);
};
// 审批人
const handleChooseapprover = (id) => {
  if (id) {
    form.meetingJionUser = id;
  }
};
// 抄送人
const handleChooseapproverCc = (id) => {
  if (id && id[0] === userStore.userId) {
  } else {
    form.meetingCopyUser = id;
  }
};

// 提交
const submitForm = async () => {
  let params = {
    ...form,
    // fileList: fileList.value,
    meetingPointFile: meetingPointFile.value,
    meetingJionUserIdList:
      form.meetingJionUser &&
      form.meetingJionUser.map((item) => Number(item.userId)),
    meetingCopyUserIdList: form.meetingCopyUser.map((item) =>
      Number(item.userId)
    ),
  };

  const res = await importHstriy(params);
  if (res.code === 200) {
    ElMessage.success(res.msg);
    router.go(-1);
  }
};

onMounted(async () => {
  await getMeetingDetail();

  setTimeout(() => {
    if (form.meetingCopyUser === null) {
      form.meetingCopyUser = [];
    }
    if (route.query.name === "1") {
      form.meetingCopyUser.push(approverRef.value.currentPerson);
    }
  }, 1000);
});
</script>
<style lang="scss" scoped>
.container {
  padding: 20px;
  .file {
    margin: 50px 20px;
  }
  .content {
    margin-top: 20px;
  }
}
</style>
